<!doctype html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">



<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css">


  <meta name="keywords" content="mcat">








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0">






<meta name="description" content="Colorful_Ghost的个人博客">
<meta property="og:type" content="website">
<meta property="og:title" content="你的口袋有什么？">
<meta property="og:url" content="http://blog.vimc.cc/index.html">
<meta property="og:site_name" content="你的口袋有什么？">
<meta property="og:description" content="Colorful_Ghost的个人博客">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="你的口袋有什么？">
<meta name="twitter:description" content="Colorful_Ghost的个人博客">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: 'undefined',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://blog.vimc.cc/">





  <title> 你的口袋有什么？ </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?ac9533e5100bee8b75e87a8bb5e51c10";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>










  
  
    
  

  <div class="container sidebar-position-left 
   page-home 
 ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">你的口袋有什么？</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">Ghost's Blog</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-wisdom">
          <a href="/resume" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-book"></i> <br>
            
            简历
          </a>
        </li>
      
        
        <li class="menu-item menu-item-support">
          <a href="/support" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-support"></i> <br>
            
            赞助
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://blog.vimc.cc/2019/01/18/YApi管理平台搭建/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Colorful_Ghost">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="你的口袋有什么？">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2019/01/18/YApi管理平台搭建/" itemprop="url">
                  YApi管理平台搭建
                </a>
              
            
          </h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-01-18T12:14:39+08:00">
                2019-01-18
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="YApi-管理平台搭建"><a href="#YApi-管理平台搭建" class="headerlink" title="YApi 管理平台搭建"></a>YApi 管理平台搭建</h1><p>YApi是我在github上逛了一圈感觉还不错API管理平台，就是功能比较复杂使用的学习成本比较高。</p>
<p>以下操作是在CentOS上进行搭建。</p>
<h2 id="Nodejs环境搭建"><a href="#Nodejs环境搭建" class="headerlink" title="Nodejs环境搭建"></a>Nodejs环境搭建</h2><p><strong>注意：国内第一个方案可能不能使用</strong></p>
<h3 id="第一个方案"><a href="#第一个方案" class="headerlink" title="第一个方案"></a>第一个方案</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">curl -sL https://rpm.nodesource.com/setup_11.x | sudo bash -</span><br></pre></td></tr></table></figure>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo yum install nodejs</span><br></pre></td></tr></table></figure>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">node --version</span><br><span class="line"><span class="meta">#</span><span class="bash"> 输出 v11.1.0</span></span><br></pre></td></tr></table></figure>
<p>​    由于国内大墙，在使用yum安装最新的Nodejs会遇到一些坑。 本应该是这样 ，但是rpm.nodesource.com必须挂代理才能正常连接，所以我换了个更好的方案。</p>
<h3 id="第二个方案：NVM（Node-Version-Manager）安装"><a href="#第二个方案：NVM（Node-Version-Manager）安装" class="headerlink" title="第二个方案：NVM（Node Version Manager）安装"></a>第二个方案：NVM（Node Version Manager）安装</h3><p>项目地址：<a href="https://github.com/creationix/nvm" target="_blank" rel="noopener">https://github.com/creationix/nvm</a></p>
<ol>
<li>安装脚本：</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash</span><br></pre></td></tr></table></figure>
<p>出现以下内容<br><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Close and reopen your terminal to start using nvm</span><br></pre></td></tr></table></figure></p>
<ol>
<li>运行如下命令</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">source ~/.bashrc</span><br></pre></td></tr></table></figure>
<ol>
<li>验证安装</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">nvm --version</span><br></pre></td></tr></table></figure>
<h2 id="MongoDB-4-0安装"><a href="#MongoDB-4-0安装" class="headerlink" title="MongoDB 4.0安装"></a>MongoDB 4.0安装</h2><p>本来我是按照<a href="https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/" target="_blank" rel="noopener">官方教程</a>走的但是国内大墙我实在是佩服（时间都浪费在找镜像上）….最后找到了阿里的镜像….</p>
<h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><ol>
<li><p>添加yum</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim /etc/yum.repos.d/mongodb-org-4.0.repo</span><br></pre></td></tr></table></figure>
</li>
<li><p>新增如下配置</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">[mngodb-org]</span><br><span class="line">name=MongoDB Repository</span><br><span class="line">baseurl=http://mirrors.aliyun.com/mongodb/yum/redhat/7Server/mongodb-org/4.0/x86_64/</span><br><span class="line">gpgcheck=0</span><br><span class="line">enabled=1</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>3.更新安装</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">yum update</span><br><span class="line">yum -y install mongodb-org</span><br></pre></td></tr></table></figure>
<p>4.查看mongo安装位置</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">whereis mongod</span><br><span class="line"><span class="meta">#</span><span class="bash"> 输出</span></span><br><span class="line">mongod: /usr/bin/mongod /etc/mongod.conf /usr/share/man/man1/mongod.1</span><br></pre></td></tr></table></figure>
<p>5.修改配置</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">vim /etc/mongod.conf</span><br><span class="line"><span class="meta">#</span><span class="bash"> 修改如下内容</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> bindIp: 172.0.0.1  改为 bindIp: 0.0.0.0</span></span><br></pre></td></tr></table></figure>
<ol>
<li>启动MongoDB<br>启动mongodb ：systemctl start mongod.service<br>停止mongodb ：systemctl stop mongod.service<br>查看mongodb的状态：systemctl status mongod.service</li>
</ol>
<h2 id="API管理平台搭建"><a href="#API管理平台搭建" class="headerlink" title="API管理平台搭建"></a>API管理平台搭建</h2><p>项目地址：<a href="https://github.com/YMFE/yapi" target="_blank" rel="noopener">https://github.com/YMFE/yapi</a></p>
<h3 id="安装-1"><a href="#安装-1" class="headerlink" title="安装"></a>安装</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install -g yapi-cli --registry https://registry.npm.taobao.org</span><br><span class="line">yapi server</span><br></pre></td></tr></table></figure>
<p>然后到安装目录下</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">nvm install node</span><br><span class="line">node vendors/server/app.js</span><br></pre></td></tr></table></figure>
<p>然后在浏览器打开 <a href="http://127.0.0.1:3000" target="_blank" rel="noopener">http://127.0.0.1:3000</a> 访问</p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://blog.vimc.cc/2018/12/26/使用Docker部署MySQL/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Colorful_Ghost">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="你的口袋有什么？">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2018/12/26/使用Docker部署MySQL/" itemprop="url">
                  使用Docker部署MySQL
                </a>
              
            
          </h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-12-26T15:01:59+08:00">
                2018-12-26
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Docker/" itemprop="url" rel="index">
                    <span itemprop="name">Docker</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="卸载旧版本Docker（如果没有安装过跳过）"><a href="#卸载旧版本Docker（如果没有安装过跳过）" class="headerlink" title="卸载旧版本Docker（如果没有安装过跳过）"></a>卸载旧版本Docker（如果没有安装过跳过）</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> sudo yum remove docker \</span></span><br><span class="line">                  docker-client \</span><br><span class="line">                  docker-client-latest \</span><br><span class="line">                  docker-common \</span><br><span class="line">                  docker-latest \</span><br><span class="line">                  docker-latest-logrotate \</span><br><span class="line">                  docker-logrotate \</span><br><span class="line">                  docker-selinux \</span><br><span class="line">                  docker-engine-selinux \</span><br><span class="line">                  docker-engine</span><br></pre></td></tr></table></figure>
<h2 id="安装Docker-CE"><a href="#安装Docker-CE" class="headerlink" title="安装Docker CE"></a>安装Docker CE</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> step 1: 安装必要的一些系统工具</span></span><br><span class="line">sudo yum install -y yum-utils device-mapper-persistent-data lvm2</span><br><span class="line"><span class="meta">#</span><span class="bash"> Step 2: 添加软件源信息 这里推荐国内阿里的镜像</span></span><br><span class="line">sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo</span><br><span class="line"><span class="meta">#</span><span class="bash"> Step 3: 更新并安装 Docker-CE</span></span><br><span class="line">sudo yum makecache fast</span><br><span class="line">sudo yum -y install docker-ce</span><br><span class="line"><span class="meta">#</span><span class="bash"> Step 4: 开启Docker服务</span></span><br><span class="line">sudo service docker start</span><br></pre></td></tr></table></figure>
<h2 id="获取MySQL的Docker镜像"><a href="#获取MySQL的Docker镜像" class="headerlink" title="获取MySQL的Docker镜像"></a>获取MySQL的Docker镜像</h2><h3 id="找到MySQL的镜像仓库"><a href="#找到MySQL的镜像仓库" class="headerlink" title="找到MySQL的镜像仓库"></a>找到MySQL的镜像仓库</h3><p>MySQL镜像仓库：<a href="https://hub.docker.com/_/mysql" target="_blank" rel="noopener">https://hub.docker.com/_/mysql</a></p>
<h2 id="创建MySQL容器"><a href="#创建MySQL容器" class="headerlink" title="创建MySQL容器"></a>创建MySQL容器</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> -p 把宿主机器的端口桥接到容器内的端口内 </span></span><br><span class="line"><span class="meta">#</span><span class="bash"> -- name 指的是你的docker container name</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> -v 把宿主机器的文件挂载到容器内达到容器内容的数据能持久化到宿主机器上</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> 关于-v参数Docker Volume 可以查看这篇文章  http://dockone.io/article/128</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> -e 配置参数</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> <span class="variable">$PWD</span> 你持久化文件路径地址</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> -d --detach=<span class="literal">false</span>  指定容器运行于前台还是后台，默认为<span class="literal">false</span>   </span></span><br><span class="line"><span class="meta">#</span><span class="bash"> docker run 命令常见参数参考https://blog.csdn.net/kunloz520/article/details/53839237</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> mysql:latest mysql镜像:版本 会指定从镜像仓库拉取5.7版本为基础的镜像后运行容器</span></span><br><span class="line">docker run -p 3306:3306 --name mysql -v $PWD/conf:/etc/mysql/conf.d -v $PWD/logs:/logs -v $PWD/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7</span><br></pre></td></tr></table></figure>
<h2 id="查看Docker运行状态"><a href="#查看Docker运行状态" class="headerlink" title="查看Docker运行状态"></a>查看Docker运行状态</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">[root@middlehomework-no docker-mysql]# docker ps -a</span><br><span class="line">CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                               NAMES</span><br><span class="line">b2291bf42076        mysql:5.7           "docker-entrypoint.s…"   5 minutes ago       Up 5 minutes        0.0.0.0:3306-&gt;3306/tcp, 33060/tcp   mysql</span><br></pre></td></tr></table></figure>
<h2 id="检查端口是否正常开放"><a href="#检查端口是否正常开放" class="headerlink" title="检查端口是否正常开放"></a>检查端口是否正常开放</h2><p>iptables配置：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">iptables -L</span><br><span class="line"><span class="meta">#</span><span class="bash"> 如果没有则开通端口</span></span><br><span class="line">iptables -A INPUT -p tcp --dport 3306 -j ACCEPT</span><br><span class="line">iptables -A OUTPUT -p tcp --sport 3306 -j ACCEPT</span><br></pre></td></tr></table></figure>
<p>CentOS7用户firewalld配置:</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> 查看所有打开的端口</span></span><br><span class="line">firewall-cmd --zone=public --list-ports</span><br><span class="line"><span class="meta">#</span><span class="bash"> 如果没有3306端口则开通端口</span></span><br><span class="line">firewall-cmd --zone=public --add-port=3306/tcp --permanent</span><br></pre></td></tr></table></figure>
<h2 id="意外情况"><a href="#意外情况" class="headerlink" title="意外情况"></a>意外情况</h2><h3 id="Docker-容器被意外关闭"><a href="#Docker-容器被意外关闭" class="headerlink" title="Docker 容器被意外关闭"></a>Docker 容器被意外关闭</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> restart 重启 stop 停止 容器</span></span><br><span class="line">docker start &lt;CONTAINER ID&gt;</span><br></pre></td></tr></table></figure>
<h3 id="修改MySQL密码"><a href="#修改MySQL密码" class="headerlink" title="修改MySQL密码"></a>修改MySQL密码</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">docker stop &lt;CONTAINER ID&gt;</span><br><span class="line">docker rm &lt;CONTAINER ID&gt;</span><br><span class="line"><span class="meta">#</span><span class="bash"> 因为mysql的重要数据和配置文件都已经持久化在宿主机器上，如果容器内的其他文件配置也需要持久化加-v</span></span><br><span class="line">docker run -p 3306:3306 --name mysql -v $PWD/conf:/etc/mysql/conf.d -v $PWD/logs:/logs -v $PWD/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=你修改后的密码 -d mysql:5.7</span><br></pre></td></tr></table></figure>
<p>因为Docker本身是无状态容器，有状态即有多个功能不同的实例，有依赖和启动先后关系，需要做数据持久化。无状态即实例间互相不依赖，它的请求包含了响应端需求的全部信息，比较好伸缩 ，所以在Docker做数据持久化就会稍微麻烦一些。</p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://blog.vimc.cc/2018/12/17/Java用lambda分页List里的数据/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Colorful_Ghost">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="你的口袋有什么？">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2018/12/17/Java用lambda分页List里的数据/" itemprop="url">
                  Java用lambda分页List里的数据
                </a>
              
            
          </h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-12-17T17:03:08+08:00">
                2018-12-17
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Java/" itemprop="url" rel="index">
                    <span itemprop="name">Java</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>​    因为业务需求需要循环调用第三方接口批量获取数据，在stackoverflow上找到了一种比较好的方法，加上泛型和注释方便后期维护使用。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> java.util.List;</span><br><span class="line"><span class="keyword">import</span> java.util.Map;</span><br><span class="line"><span class="keyword">import</span> java.util.stream.IntStream;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="keyword">static</span> java.lang.Math.min;</span><br><span class="line"><span class="keyword">import</span> <span class="keyword">static</span> java.util.stream.Collectors.toMap;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * https://stackoverflow.com/questions/29273705/how-to-paginate-a-list-of-objects-in-java-8</span></span><br><span class="line"><span class="comment"> * 分页工具类 Map Integer是当前页数 List当前页数内容</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@author</span> wlwang3</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@create</span> 2018/12/4-18:28</span></span><br><span class="line"><span class="comment"> **/</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">PaginationUtil</span> </span>&#123;</span><br><span class="line">    <span class="keyword">public</span> <span class="keyword">static</span> &lt;T&gt; Map&lt;Integer, List&lt;T&gt;&gt; partition(List&lt;T&gt; list, <span class="keyword">int</span> pageSize) &#123;</span><br><span class="line">        <span class="keyword">return</span> IntStream.iterate(<span class="number">0</span>, i -&gt; i + pageSize)</span><br><span class="line">                <span class="comment">//循环需要页面尺寸  如pageSize=10 ,它就会10 20 30 40 50的一直循环</span></span><br><span class="line">                .limit((list.size() + pageSize - <span class="number">1</span>) / pageSize)</span><br><span class="line">                <span class="comment">//限制循环的次数  list的大小+页的大小  / 页的大小</span></span><br><span class="line">                .boxed()</span><br><span class="line">                <span class="comment">//看实现方法 把int包装成了对象</span></span><br><span class="line">                .collect(toMap(i -&gt; i / pageSize,</span><br><span class="line">                        <span class="comment">//返回结构 key当前页数   i包装对象后的Integer是当前循环的页数大小</span></span><br><span class="line">                        i -&gt; list.subList(i, min(i + pageSize, list.size()))));</span><br><span class="line">        <span class="comment">//list分页 subList(取当前循环的指针,(a &lt;= b)：如果是返回当前指针+分页的大小?:如果不是则当前的指针大小到最后一个指针的数据)</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://blog.vimc.cc/2018/09/04/vue-element-admin 后台管理框架集成/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Colorful_Ghost">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="你的口袋有什么？">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2018/09/04/vue-element-admin 后台管理框架集成/" itemprop="url">
                  vue-element-admin 后台管理框架集成
                </a>
              
            
          </h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-09-04T10:30:30+08:00">
                2018-09-04
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Vue/" itemprop="url" rel="index">
                    <span itemprop="name">Vue</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="必要的准备工作"><a href="#必要的准备工作" class="headerlink" title="必要的准备工作"></a>必要的准备工作</h2><ol>
<li><a href="http://es6.ruanyifeng.com/#docs/set-map" target="_blank" rel="noopener">ES6特性的基本了解</a> </li>
<li><a href="https://cn.vuejs.org/v2/guide/" target="_blank" rel="noopener">Vue2.0框架</a> <ol>
<li><a href="https://segmentfault.com/a/1190000011381906" target="_blank" rel="noopener">关于Vue实例的生命周期</a> </li>
<li><a href="https://segmentfault.com/a/1190000008570622" target="_blank" rel="noopener">关于Vue实例的生命周期created和mounted的区别</a></li>
<li><a href="https://blog.csdn.net/smartdt/article/details/75557369" target="_blank" rel="noopener">Vuejs中关于computed、methods、watch的区别</a></li>
<li><a href="https://segmentfault.com/a/1190000010385155" target="_blank" rel="noopener">Vue2 组件间通信全方案</a></li>
</ol>
</li>
<li><a href="http://element.eleme.io/#/zh-CN/component/installation" target="_blank" rel="noopener">element-ui</a> </li>
<li><a href="https://www.kancloud.cn/yunye/axios/234845" target="_blank" rel="noopener">axios 请求接口</a><ol>
<li><a href="https://segmentfault.com/a/1190000012635783" target="_blank" rel="noopener">axios post方式传递参数，请求参数格式化</a></li>
</ol>
</li>
<li><a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener">vue-router 官方路由组件</a></li>
<li><a href="http://mockjs.com" target="_blank" rel="noopener">Mock.js 拦截ajax请求生成假数据</a></li>
<li><a href="https://panjiachen.github.io/vue-element-admin-site/zh/" target="_blank" rel="noopener">vue-element-admin官方文档</a></li>
</ol>
<h2 id="环境的搭建"><a href="#环境的搭建" class="headerlink" title="环境的搭建"></a>环境的搭建</h2><h3 id="Node-js和Git的安装"><a href="#Node-js和Git的安装" class="headerlink" title="Node.js和Git的安装"></a>Node.js和Git的安装</h3><ol>
<li><a href="https://nodejs.org/en/" target="_blank" rel="noopener">https://nodejs.org/en/</a>  （开代理访问速度更快）</li>
<li><a href="https://git-scm.com/downloads" target="_blank" rel="noopener">https://git-scm.com/downloads</a> Windows下的Git工具</li>
</ol>
<h4 id="VSCode自带的集成终端powershell在npm全局安装需要管理员权限"><a href="#VSCode自带的集成终端powershell在npm全局安装需要管理员权限" class="headerlink" title="VSCode自带的集成终端powershell在npm全局安装需要管理员权限"></a>VSCode自带的集成终端powershell在npm全局安装需要管理员权限</h4><ol>
<li>踩坑后的解决方案：<a href="https://segmentfault.com/q/1010000009166404" target="_blank" rel="noopener">https://segmentfault.com/q/1010000009166404</a></li>
</ol>
<h3 id="VSCode插件推荐及配置相关"><a href="#VSCode插件推荐及配置相关" class="headerlink" title="VSCode插件推荐及配置相关"></a>VSCode插件推荐及配置相关</h3><h4 id="必备插件"><a href="#必备插件" class="headerlink" title="必备插件"></a>必备插件</h4><ol>
<li>ESLint<br>插件化的 javascript 代码检测工具</li>
<li>Prettier<br>代码美化插件</li>
<li>Vetur<br>vue 插件 语法高亮、智能感知、Emmet 等</li>
<li>Gitlens<br>git 日志插件</li>
</ol>
<h4 id="推荐插件"><a href="#推荐插件" class="headerlink" title="推荐插件"></a>推荐插件</h4><ol>
<li>Better Comments<br>可配置的代码注释插件 </li>
<li>Auto Rename Tag<br>自动重命名 HTML/XML 标签</li>
<li>Open in browser<br>在默认浏览器打开 HTML 文件</li>
<li>Path Intellisense<br>自动路劲补全</li>
<li>Polacode<br>代码截图</li>
<li>Setting Sync<br>同步 VScode 插件配置</li>
<li>VSCode Great Icons<br>文档类型图标</li>
<li>Dracula Official<br>暗色系主题</li>
<li>Bracket Pair Colorizer<br>让括号拥有独立的颜色，易于区分</li>
</ol>
<h4 id="推荐的插件配置"><a href="#推荐的插件配置" class="headerlink" title="推荐的插件配置"></a>推荐的插件配置</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">"editor.fontSize"</span>: <span class="number">20</span>,</span><br><span class="line">  <span class="string">"editor.multiCursorModifier"</span>: <span class="string">"ctrlCmd"</span>,</span><br><span class="line">  <span class="string">"editor.snippetSuggestions"</span>: <span class="string">"top"</span>,</span><br><span class="line">  <span class="string">"explorer.confirmDelete"</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="string">"files.associations"</span>: &#123;</span><br><span class="line">    <span class="string">"*.tpl"</span>: <span class="string">"html"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"editor.wordWrap"</span>: <span class="string">"on"</span>,</span><br><span class="line">  <span class="string">"editor.renderIndentGuides"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">"emmet.triggerExpansionOnTab"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">"gitlens.advanced.messages"</span>: &#123;</span><br><span class="line">    <span class="string">"suppressCommitHasNoPreviousCommitWarning"</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="string">"suppressCommitNotFoundWarning"</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="string">"suppressFileNotUnderSourceControlWarning"</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="string">"suppressGitVersionWarning"</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="string">"suppressLineUncommittedWarning"</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="string">"suppressNoRepositoryWarning"</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="string">"suppressResultsExplorerNotice"</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="string">"suppressShowKeyBindingsNotice"</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="string">"suppressUpdateNotice"</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="string">"suppressWelcomeNotice"</span>: <span class="literal">true</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// "editor.formatOnSave": true,</span></span><br><span class="line">  <span class="string">"[javascript]"</span>: &#123;</span><br><span class="line">    <span class="string">"editor.formatOnSave"</span>: <span class="literal">true</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"html.format.enable"</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="string">"gitlens.gitExplorer.files.layout"</span>: <span class="string">"tree"</span>,</span><br><span class="line">  <span class="string">"git.enableSmartCommit"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">"emmet.includeLanguages"</span>: &#123;</span><br><span class="line">    <span class="string">"markdown"</span>: <span class="string">"html"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"emmet.excludeLanguages"</span>: [<span class="string">""</span>],</span><br><span class="line">  <span class="string">"eslint.enable"</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="string">"workbench.startupEditor"</span>: <span class="string">"newUntitledFile"</span>,</span><br><span class="line">  <span class="comment">// "prettier.spaceBeforeFunctionParen": true,</span></span><br><span class="line">  <span class="string">"editor.tabSize"</span>: <span class="number">2</span>,</span><br><span class="line">  <span class="string">"eslint.autoFixOnSave"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">"git.autofetch"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">"editor.formatOnPaste"</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="string">"prettier.tabWidth"</span>: <span class="number">2</span>,</span><br><span class="line">  <span class="string">"prettier.singleQuote"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">"prettier.trailingComma"</span>: <span class="string">"none"</span>,</span><br><span class="line">  <span class="string">"prettier.semi"</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="string">"prettier.useTabs"</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="string">"vetur.format.defaultFormatter.js"</span>: <span class="string">"prettier"</span>,</span><br><span class="line">  <span class="string">"vetur.format.defaultFormatterOptions"</span>: &#123;</span><br><span class="line">    <span class="string">"js-beautify-html"</span>: &#123;</span><br><span class="line">      <span class="string">"wrap_attributes"</span>: <span class="string">"force-aligned"</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"editor.insertSpaces"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">"editor.detectIndentation"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">"eslint.validate"</span>: [</span><br><span class="line">    <span class="string">"javascript"</span>,</span><br><span class="line">    <span class="string">"javascriptreact"</span>,</span><br><span class="line">    <span class="string">"html"</span>,</span><br><span class="line">    <span class="string">"vue"</span>,</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="string">"language"</span>: <span class="string">"vue"</span>,</span><br><span class="line">      <span class="string">"autoFix"</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  ],</span><br><span class="line">  <span class="string">"eslint.options"</span>: &#123;</span><br><span class="line">    <span class="string">"plugins"</span>: [<span class="string">"html"</span>]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"editor.formatOnSave"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// "prettier.javascriptEnable": [</span></span><br><span class="line">  <span class="comment">//     "javascript",</span></span><br><span class="line">  <span class="comment">//     "javascriptreact"</span></span><br><span class="line">  <span class="comment">// ],</span></span><br><span class="line">  <span class="string">"vetur.format.defaultFormatter.html"</span>: <span class="string">"js-beautify-html"</span>,</span><br><span class="line">  <span class="string">"emmet.syntaxProfiles"</span>: &#123;</span><br><span class="line">    <span class="string">"vue-html"</span>: <span class="string">"html"</span>,</span><br><span class="line">    <span class="string">"vue"</span>: <span class="string">"html"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"gitlens.keymap"</span>: <span class="string">"alternate"</span>,</span><br><span class="line">  <span class="string">"explorer.confirmDragAndDrop"</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="string">"search.location"</span>: <span class="string">"sidebar"</span>,</span><br><span class="line">  <span class="string">"files.exclude"</span>: &#123;</span><br><span class="line">    <span class="string">"**/.git"</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="string">"**/.svn"</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="string">"**/.hg"</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="string">"**/CVS"</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="string">"**/.DS_Store"</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="string">"**/bower_components"</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="string">"**/jspm_packages"</span>: <span class="literal">true</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"extensions.autoUpdate"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">"gitlens.historyExplorer.enabled"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">"markdown.preview.breaks"</span>: <span class="literal">true</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>把以上配置放入VScode IDE 下 <code>.vscode/settings.json</code>工作区设置里</p>
<h2 id="准备开始搬砖"><a href="#准备开始搬砖" class="headerlink" title="准备开始搬砖"></a>准备开始搬砖</h2><p>补充关于路径@占位符：<code>webpack.base.conf.js</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  context: path.resolve(__dirname, <span class="string">'../'</span>),</span><br><span class="line">  entry: &#123;</span><br><span class="line">    app: <span class="string">'./src/main.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">  output: &#123;</span><br><span class="line">    path: config.build.assetsRoot,</span><br><span class="line">    filename: <span class="string">'[name].js'</span>,</span><br><span class="line">    publicPath: process.env.NODE_ENV === <span class="string">'production'</span></span><br><span class="line">      ? config.build.assetsPublicPath</span><br><span class="line">      : config.dev.assetsPublicPath</span><br><span class="line">  &#125;,</span><br><span class="line">  resolve: &#123;</span><br><span class="line">    extensions: [<span class="string">'.js'</span>, <span class="string">'.vue'</span>, <span class="string">'.json'</span>],</span><br><span class="line">    alias: &#123;</span><br><span class="line">      <span class="string">'@'</span>: resolve(<span class="string">'src'</span>),</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p><strong><em>webpack配置的路径,@占位符表示src。</em></strong></p>
<h3 id="所有的功能实现都从路由开始"><a href="#所有的功能实现都从路由开始" class="headerlink" title="所有的功能实现都从路由开始"></a>所有的功能实现都从路由开始</h3><p>路由和侧边栏是组织起一个后台应用的关键骨架</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  path: <span class="string">'/getClassReport'</span>,</span><br><span class="line">  component: Layout,</span><br><span class="line">  redirect: <span class="string">'/permission/index'</span>, <span class="comment">//重定向地址，在面包屑中点击会重定向去的地址</span></span><br><span class="line">  hidden: <span class="literal">true</span>, <span class="comment">// 不在侧边栏线上</span></span><br><span class="line">  alwaysShow: <span class="literal">true</span>, <span class="comment">//一直显示根路由</span></span><br><span class="line">  meta: &#123; <span class="attr">roles</span>: [<span class="string">'admin'</span>,<span class="string">'editor'</span>] &#125;, <span class="comment">//你可以在根路由设置权限，这样它下面所以的子路由都继承了这个权限</span></span><br><span class="line">  children: [&#123;</span><br><span class="line">    path: <span class="string">'index'</span>,</span><br><span class="line">    component: <span class="function"><span class="params">()</span>=&gt;</span><span class="keyword">import</span>(<span class="string">'permission/index'</span>),</span><br><span class="line">    name: <span class="string">'permission'</span>,</span><br><span class="line">    meta: &#123;</span><br><span class="line">      title: <span class="string">'permission'</span>,</span><br><span class="line">      icon: <span class="string">'lock'</span>, <span class="comment">//图标</span></span><br><span class="line">      role: [<span class="string">'admin'</span>,<span class="string">'editor'</span>], <span class="comment">//或者你可以给每一个子路由设置自己的权限</span></span><br><span class="line">      noCache: <span class="literal">true</span> <span class="comment">// 不会被 &lt;keep-alive&gt; 缓存</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>关于keep-alive</strong>：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。</p>
<h3 id="使用Mock数据进行开发"><a href="#使用Mock数据进行开发" class="headerlink" title="使用Mock数据进行开发"></a>使用Mock数据进行开发</h3><h4 id="基础路由侧边栏的配置"><a href="#基础路由侧边栏的配置" class="headerlink" title="基础路由侧边栏的配置"></a>基础路由侧边栏的配置</h4><p><code>@/router/index.vue</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  path: <span class="string">'/pi'</span>,</span><br><span class="line">  component: Layout,</span><br><span class="line">  children: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="string">'index'</span>,</span><br><span class="line">      component: <span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'@/views/pi/index'</span>),</span><br><span class="line">      name: <span class="string">'raspberrypi'</span>,</span><br><span class="line">      meta: &#123; <span class="attr">title</span>: <span class="string">'Raspberry Pi'</span>, <span class="attr">icon</span>: <span class="string">'raspberrypi'</span> &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="创建API请求方法"><a href="#创建API请求方法" class="headerlink" title="创建API请求方法"></a>创建API请求方法</h4><p>在 @api 文件夹下创建API </p>
<p><code>@/api/pi.js</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request <span class="keyword">from</span> <span class="string">'@/utils/request'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">getGPIOStatus</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> request(&#123;</span><br><span class="line">    url: <span class="string">'/pi/getGPIOStatus'</span>,</span><br><span class="line">    method: <span class="string">'get'</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="使用Mock-js拦截请求"><a href="#使用Mock-js拦截请求" class="headerlink" title="使用Mock.js拦截请求"></a>使用Mock.js拦截请求</h4><p>在<code>@/mock/index.js</code>添加拦截规则</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> raspberryPiAPI <span class="keyword">from</span> <span class="string">'./pi'</span> <span class="comment">//导入创建的API</span></span><br><span class="line">Mock.mock(<span class="regexp">/\/pi\/getGPIOStatus/</span>, <span class="string">'get'</span>, raspberryPiAPI.getGPIOStatus)</span><br></pre></td></tr></table></figure>
<h4 id="添加对拦截接口的Mock数据进行生成"><a href="#添加对拦截接口的Mock数据进行生成" class="headerlink" title="添加对拦截接口的Mock数据进行生成"></a>添加对拦截接口的Mock数据进行生成</h4><p>新建Mock生成规则文件<code>@/mock/pi.js</code> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Mock <span class="keyword">from</span> <span class="string">'mockjs'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> GPIOSize = <span class="number">14</span></span><br><span class="line"><span class="keyword">const</span> GPIO = []</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item = <span class="number">0</span>; item &lt; GPIOSize; item++) &#123;</span><br><span class="line">  GPIO.push(Mock.mock(</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="string">'gpio'</span>: <span class="string">'@increment'</span>, </span><br><span class="line">      <span class="string">'name'</span>: Mock.Random.csentence(<span class="number">1</span>, <span class="number">3</span>),</span><br><span class="line">      <span class="string">'switch'</span>: Mock.Random.bool(<span class="number">3</span>, <span class="number">20</span>, <span class="literal">true</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  ))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  getGPIOStatus: <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="comment">//把生成组装好的Mock数据导出</span></span><br><span class="line">      total: GPIO.length,</span><br><span class="line">      items: GPIO</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="创建路由所指向对应的业务组件"><a href="#创建路由所指向对应的业务组件" class="headerlink" title="创建路由所指向对应的业务组件"></a>创建路由所指向对应的业务组件</h4><p><code>@/views/pi/index.vue</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tab-container"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-table</span> <span class="attr">:data</span>=<span class="string">"tabData"</span>  //表格绑定<span class="attr">tabData</span>数据</span></span><br><span class="line"><span class="tag">              <span class="attr">border</span> // 一些样式调整</span></span><br><span class="line"><span class="tag">              <span class="attr">fit</span></span></span><br><span class="line"><span class="tag">              <span class="attr">highlight-current-row</span></span></span><br><span class="line"><span class="tag">              <span class="attr">style</span>=<span class="string">"width:100%"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">align</span>=<span class="string">"center"</span> // 表格文字居中</span></span><br><span class="line"><span class="tag">                       <span class="attr">prop</span>=<span class="string">"gpio"</span>  //<span class="attr">tabData.gpio</span> 字段</span></span><br><span class="line"><span class="tag">                       <span class="attr">label</span>=<span class="string">"GPIO"</span>&gt;</span> // 标签</span><br><span class="line">      <span class="tag">&lt;/<span class="name">el-table-column</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">align</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                       <span class="attr">prop</span>=<span class="string">"name"</span></span></span><br><span class="line"><span class="tag">                       <span class="attr">label</span>=<span class="string">"作用"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">el-table-column</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">align</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                       <span class="attr">prop</span>=<span class="string">"switch"</span></span></span><br><span class="line"><span class="tag">                       <span class="attr">label</span>=<span class="string">"状态"</span>&gt;</span></span><br><span class="line">          </span><br><span class="line">        <span class="tag">&lt;<span class="name">template</span> <span class="attr">slot-scope</span>=<span class="string">"scope"</span>&gt;</span>   https://segmentfault.com/a/1190000012996217</span><br><span class="line">              <span class="comment">&lt;!--通过（scope.row）拿到当前行数据--&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">el-tag</span> <span class="attr">v-if</span>=<span class="string">scope.row.switch</span>  //当检查改行数据<span class="attr">switch</span>状态来渲染标签</span></span><br><span class="line"><span class="tag">                  <span class="attr">type</span>=<span class="string">"success"</span>&gt;</span>打开状态<span class="tag">&lt;/<span class="name">el-tag</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">el-tag</span> <span class="attr">v-else</span></span></span><br><span class="line"><span class="tag">                  <span class="attr">type</span>=<span class="string">"danger"</span>&gt;</span>关闭状态<span class="tag">&lt;/<span class="name">el-tag</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">el-table-column</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">align</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                       <span class="attr">prop</span>=<span class="string">"switch"</span></span></span><br><span class="line"><span class="tag">                       <span class="attr">label</span>=<span class="string">"开关"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">template</span> <span class="attr">slot-scope</span>=<span class="string">"scope"</span>&gt;</span> </span><br><span class="line">          <span class="tag">&lt;<span class="name">el-switch</span> <span class="attr">v-model</span>=<span class="string">"scope.row.switch"</span></span></span><br><span class="line"><span class="tag">                     <span class="attr">active-color</span>=<span class="string">"#13ce66"</span> //激活状态的颜色</span></span><br><span class="line"><span class="tag">                     <span class="attr">inactive-color</span>=<span class="string">"#ff4949"</span> //闭合状态的颜色</span></span><br><span class="line"><span class="tag">                     @<span class="attr">change</span>=<span class="string">'change($event,scope.$index,scope)'</span>&gt;</span><span class="tag">&lt;/<span class="name">el-switch</span>&gt;</span></span><br><span class="line">					// change事件 传入当前事件的值，和插槽索引，和插槽详细参数</span><br><span class="line">        <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">el-table-column</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">el-table</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="comment">//导入请求API</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123; getGPIOStatus &#125; <span class="keyword">from</span> <span class="string">'@/api/pi'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="undefined">  data() &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      tabData: <span class="literal">null</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;,</span></span><br><span class="line"><span class="undefined">  created() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">//在创建钩子上调用请求接口方法</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">this</span>.getGPIOData()</span></span><br><span class="line"><span class="undefined">  &#125;,</span></span><br><span class="line"><span class="undefined">  methods: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">//在参数改变时候在控制台打印日志</span></span></span><br><span class="line"><span class="javascript">    change: <span class="function"><span class="keyword">function</span>(<span class="params">$callback, index, scope</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// $callback在改变事件时候el-switch的状态，index索引</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$log.debug(<span class="string">'switch callback状态'</span>, $callback, index, scope)</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    getGPIOData() &#123;</span></span><br><span class="line"><span class="javascript">      getGPIOStatus().then(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.tabData = response.data.items</span></span><br><span class="line"><span class="undefined">      &#125;)</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined">&#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">.tab-container &#123;</span></span><br><span class="line"><span class="undefined">  margin: 20px;</span></span><br><span class="line"><span class="undefined">&#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>关于slot-scope：vue原生slot-scope 的值将被用作一个临时变量名,可以接收父组件传过来的值, 而在element中的table对slot-scope的值封装成了一个大的对象,对象里面有属性row(行),column(列),$index(索引),store,所以我们可以通过scope.row拿到对应的值。</p>
<h3 id="使用真实接口进行开发"><a href="#使用真实接口进行开发" class="headerlink" title="使用真实接口进行开发"></a>使用真实接口进行开发</h3><h4 id="基础路由侧边栏的配置-1"><a href="#基础路由侧边栏的配置-1" class="headerlink" title="基础路由侧边栏的配置"></a>基础路由侧边栏的配置</h4><p><code>@/router/index.vue</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  path: <span class="string">'/getClassReport'</span>, </span><br><span class="line">  component: Layout,</span><br><span class="line">  children: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="string">'index'</span>,</span><br><span class="line">      component: <span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'@/views/getClassReport/index'</span>),</span><br><span class="line">      name: <span class="string">'getClassReport'</span>,</span><br><span class="line">      meta: &#123; <span class="attr">title</span>: <span class="string">'获取班级报告'</span>, <span class="attr">icon</span>: <span class="string">'example'</span> &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>每个页面或者模块特定的业务组件则会写在当前 views 下面。如：<code>@/views/article/components/xxx.vue</code></p>
<h4 id="创建和视图对应的API"><a href="#创建和视图对应的API" class="headerlink" title="创建和视图对应的API"></a>创建和视图对应的API</h4><p>在 @api 文件夹下创建API</p>
<p><code>@api/getClassReport.js</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//vue-element-admin 封装的请求方法</span></span><br><span class="line"><span class="keyword">import</span> request <span class="keyword">from</span> <span class="string">'@/utils/request'</span></span><br><span class="line"><span class="keyword">import</span> qs <span class="keyword">from</span> <span class="string">'qs'</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">getClassReport</span>(<span class="params">hwId, classId</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//格式化传参 原因查看准备工作4-1</span></span><br><span class="line">  <span class="keyword">const</span> data = qs.stringify(&#123;</span><br><span class="line">    hwId,</span><br><span class="line">    classId</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> request(&#123;</span><br><span class="line">    url:</span><br><span class="line">      <span class="string">'/homework_middle_customer_service/homeworkReportService/getClassReport'</span>,</span><br><span class="line">    method: <span class="string">'post'</span>,</span><br><span class="line">    data</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="创建路由所指向对应的业务组件-1"><a href="#创建路由所指向对应的业务组件-1" class="headerlink" title="创建路由所指向对应的业务组件"></a>创建路由所指向对应的业务组件</h4><p>在views下创建目录和<code>@views/getClassReport/index.vue</code>父组件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">el-container</span>&gt;</span> // Container 布局容器 方便快速搭建页面的基本结构</span><br><span class="line">    <span class="tag">&lt;<span class="name">el-header</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"hwTitle"</span></span></span><br><span class="line"><span class="tag">          <span class="attr">v-if</span>=<span class="string">"classData!=null"</span>&gt;</span>&#123;&#123;classData.hwTitle&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span>// 在classData不为null的时候渲染dom</span><br><span class="line">    <span class="tag">&lt;/<span class="name">el-header</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-main</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">el-row</span>&gt;</span></span><br><span class="line">          // 类似于 BootStrap的栅格布局 如果不使用md xs lg sm属性 可以使用:span属性</span><br><span class="line">        <span class="tag">&lt;<span class="name">el-col</span> <span class="attr">:md</span>=<span class="string">"12"</span> </span></span><br><span class="line"><span class="tag">                <span class="attr">:xs</span>=<span class="string">"24"</span>&gt;</span></span><br><span class="line">            // 自定义子组件 echarts 饼图  自定义属性把classData的返回值传递给子组件</span><br><span class="line">          <span class="tag">&lt;<span class="name">pieChart</span> <span class="attr">:classReportData</span>=<span class="string">'classData'</span>&gt;</span><span class="tag">&lt;/<span class="name">pieChart</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">el-col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">el-col</span> <span class="attr">:md</span>=<span class="string">"12"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">:xs</span>=<span class="string">"24"</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">el-card</span>&gt;</span></span><br><span class="line">              //循环classData Map里的key和value 打印出来</span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(val,key) in classData"</span> </span></span><br><span class="line"><span class="tag">                 <span class="attr">:key</span>=<span class="string">"key"</span>&gt;</span></span><br><span class="line">              &#123;&#123;key&#125;&#125;----&#123;&#123;val&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">el-card</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">el-col</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">el-row</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">el-footer</span>&gt;</span></span><br><span class="line">          // 自定义子组件输入框 自定义属性在子组件组件里创建 </span><br><span class="line">        <span class="tag">&lt;<span class="name">getReportInput</span> @<span class="attr">put-hw-param</span>=<span class="string">'getClassReportData'</span>&gt;</span><span class="tag">&lt;/<span class="name">getReportInput</span>&gt;</span> </span><br><span class="line">      <span class="tag">&lt;/<span class="name">el-footer</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">el-main</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">el-container</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">//导入组件                               </span></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> pieChart <span class="keyword">from</span> <span class="string">'./PieChart'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> getReportInput <span class="keyword">from</span> <span class="string">'./input'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123; getClassReport &#125; <span class="keyword">from</span> <span class="string">'@/api/getClassReport'</span> <span class="comment">// 班级报告API</span></span></span><br><span class="line"><span class="javascript"><span class="comment">//http://es6.ruanyifeng.com/?search=import&amp;x=0&amp;y=0#docs/module#export-default-%E5%91%BD%E4%BB%A4</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// name相当于组件的相当于一个全局 ID，https://cn.vuejs.org/v2/api/#name</span></span></span><br><span class="line"><span class="javascript">  name: <span class="string">'getClassReport'</span>,</span></span><br><span class="line"><span class="undefined">  components: &#123; pieChart, getReportInput &#125;,</span></span><br><span class="line"><span class="undefined">  data() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 不使用return包裹的数据会在项目的全局可见，会造成变量污染 </span></span></span><br><span class="line"><span class="javascript">      <span class="comment">// 使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      classData: <span class="literal">null</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="comment">//created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。</span></span></span><br><span class="line"><span class="undefined">  created() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">//默认传参</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">this</span>.getClassReportData(</span></span><br><span class="line"><span class="javascript">      <span class="string">'4ac6aa86-4373-4c50-873e-9922edcce57d'</span>,</span></span><br><span class="line"><span class="javascript">      <span class="string">'1500000200030607345'</span></span></span><br><span class="line"><span class="undefined">    )</span></span><br><span class="line"><span class="undefined">  &#125;,</span></span><br><span class="line"><span class="undefined">  methods: &#123;</span></span><br><span class="line"><span class="javascript">     <span class="comment">//如果传参为空直接return</span></span></span><br><span class="line"><span class="undefined">    getClassReportData(hwId, classId) &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span> (hwId == <span class="literal">null</span> || classId == <span class="literal">null</span>) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 请求接口</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> getClassReport(hwId, classId).then(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="comment">//如果返回值不等于200弹出错误消息提示框</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">if</span> (response.data.code !== <span class="number">200</span>) &#123;</span></span><br><span class="line"><span class="javascript">          <span class="keyword">this</span>.$message(response.data.info)</span></span><br><span class="line"><span class="javascript">          <span class="keyword">return</span></span></span><br><span class="line"><span class="undefined">        &#125;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//在全局配置了日志组件vuejs-logger</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.$log.debug(<span class="string">'response'</span>, response.data)</span></span><br><span class="line"><span class="javascript">          <span class="comment">//把请求到的数据放入data里</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.classData = response.data.result</span></span><br><span class="line"><span class="undefined">      &#125;)</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined">&#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">// 全局的 @/style 放置一下全局公用的样式，每一个页面的样式就写在当前 views下面，加上scoped 或者命名空间，避免造成全局的样式污染。</span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">h2.hwTitle &#123;</span></span><br><span class="line"><span class="undefined">  text-align: center;</span></span><br><span class="line"><span class="undefined">  color: lightsalmon;</span></span><br><span class="line"><span class="undefined">&#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="创建输入框子组件"><a href="#创建输入框子组件" class="headerlink" title="创建输入框子组件"></a>创建输入框子组件</h4><p><code>@views/getClassReport/input.vue</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">el-row</span> <span class="attr">:gutter</span>=<span class="string">"10"</span> // <span class="attr">gutter</span>	栅格间隔</span></span><br><span class="line"><span class="tag">          <span class="attr">justify</span>=<span class="string">"center"</span> // <span class="attr">flex</span> 布局下的水平排列方式 </span></span><br><span class="line"><span class="tag">          <span class="attr">type</span>=<span class="string">"flex"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-col</span> <span class="attr">:span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">"hwId"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">placeholder</span>=<span class="string">"作业Id"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">change</span>=<span class="string">"setHwId"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-input</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">el-col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-col</span> <span class="attr">:span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">"classId"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">placeholder</span>=<span class="string">"班级Id"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">change</span>=<span class="string">"setClassId"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-input</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">el-col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-col</span> <span class="attr">:span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">"primary"</span></span></span><br><span class="line"><span class="tag">                 @<span class="attr">click</span>=<span class="string">"classReportEvent"</span>&gt;</span>请求数据<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span>//点击触发事件</span><br><span class="line">    <span class="tag">&lt;/<span class="name">el-col</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">el-row</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  name: <span class="string">'getReportInput'</span>,</span></span><br><span class="line"><span class="undefined">  data() &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      hwId: <span class="string">''</span>,</span></span><br><span class="line"><span class="javascript">      classId: <span class="string">''</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;,</span></span><br><span class="line"><span class="undefined">  methods: &#123;</span></span><br><span class="line"><span class="undefined">    classReportEvent() &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//通过$emit 实现子组件向父组件通信 属性名称为put-hw-param，把hwId classId传递给父组件</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$emit(<span class="string">'put-hw-param'</span>, <span class="keyword">this</span>.hwId, <span class="keyword">this</span>.classId)</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined">&#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="创建echarts饼图组件"><a href="#创建echarts饼图组件" class="headerlink" title="创建echarts饼图组件"></a>创建echarts饼图组件</h4><p><code>@views/getClassReport/PieChart.vue</code></p>
<p>关于Echarts 使用方法需要到<a href="http://echarts.baidu.com/充电" target="_blank" rel="noopener">http://echarts.baidu.com/充电</a> ，我也是搬砖而已。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"className"</span></span></span><br><span class="line"><span class="tag">       <span class="attr">:style</span>=<span class="string">"&#123;height:height,width:width&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> echarts <span class="keyword">from</span> <span class="string">'echarts'</span></span></span><br><span class="line"><span class="javascript"><span class="built_in">require</span>(<span class="string">'echarts/theme/macarons'</span>) <span class="comment">// echarts theme</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123; debounce &#125; <span class="keyword">from</span> <span class="string">'@/utils'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="undefined">  props: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 从父组件接收的值</span></span></span><br><span class="line"><span class="undefined">    classReportData: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="literal">null</span></span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    className: &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="built_in">String</span>,</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="string">'chart'</span></span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    width: &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="built_in">String</span>,</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="string">'100%'</span></span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    height: &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="built_in">String</span>,</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="string">'400px'</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;,</span></span><br><span class="line"><span class="undefined">  watch: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">//监测classReportData返回值是否有变动，有变动的初始化echarts图形</span></span></span><br><span class="line"><span class="undefined">    classReportData() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.initChart()</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;,</span></span><br><span class="line"><span class="undefined">  data() &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      chart: <span class="literal">null</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;,</span></span><br><span class="line"><span class="undefined">  mounted() &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">this</span>.__resizeHanlder = debounce(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span> (<span class="keyword">this</span>.chart) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.chart.resize()</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;, 100)</span></span><br><span class="line"><span class="javascript">    <span class="built_in">window</span>.addEventListener(<span class="string">'resize'</span>, <span class="keyword">this</span>.__resizeHanlder)</span></span><br><span class="line"><span class="undefined">  &#125;,</span></span><br><span class="line"><span class="undefined">  beforeDestroy() &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span> (!<span class="keyword">this</span>.chart) &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">window</span>.removeEventListener(<span class="string">'resize'</span>, <span class="keyword">this</span>.__resizeHanlder)</span></span><br><span class="line"><span class="javascript">    <span class="keyword">this</span>.chart.dispose()</span></span><br><span class="line"><span class="javascript">    <span class="keyword">this</span>.chart = <span class="literal">null</span></span></span><br><span class="line"><span class="undefined">  &#125;,</span></span><br><span class="line"><span class="undefined">  methods: &#123;</span></span><br><span class="line"><span class="undefined">    initChart() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.chart = echarts.init(<span class="keyword">this</span>.$el, <span class="string">'macarons'</span>)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.chart.setOption(&#123;</span></span><br><span class="line"><span class="undefined">        tooltip: &#123;</span></span><br><span class="line"><span class="javascript">          trigger: <span class="string">'item'</span>,</span></span><br><span class="line"><span class="javascript">          formatter: <span class="string">'&#123;a&#125; &lt;br/&gt;&#123;b&#125; : &#123;c&#125; (&#123;d&#125;%)'</span></span></span><br><span class="line"><span class="undefined">        &#125;,</span></span><br><span class="line"><span class="undefined">        legend: &#123;</span></span><br><span class="line"><span class="javascript">          left: <span class="string">'center'</span>,</span></span><br><span class="line"><span class="javascript">          bottom: <span class="string">'10'</span>,</span></span><br><span class="line"><span class="javascript">          data: [<span class="string">'fullCount'</span>, <span class="string">'goodCount'</span>, <span class="string">'passCount'</span>, <span class="string">'unPassCount'</span>]</span></span><br><span class="line"><span class="undefined">        &#125;,</span></span><br><span class="line"><span class="javascript">        calculable: <span class="literal">true</span>,</span></span><br><span class="line"><span class="undefined">        series: [</span></span><br><span class="line"><span class="undefined">          &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'班级报告'</span>,</span></span><br><span class="line"><span class="javascript">            type: <span class="string">'pie'</span>,</span></span><br><span class="line"><span class="javascript">            roseType: <span class="string">'radius'</span>,</span></span><br><span class="line"><span class="undefined">            radius: [15, 95],</span></span><br><span class="line"><span class="javascript">            center: [<span class="string">'50%'</span>, <span class="string">'38%'</span>],</span></span><br><span class="line"><span class="undefined">            data: [</span></span><br><span class="line"><span class="javascript">              &#123; <span class="attr">value</span>: <span class="keyword">this</span>.classReportData.fullCount, <span class="attr">name</span>: <span class="string">'fullCount'</span> &#125;,</span></span><br><span class="line"><span class="javascript">              &#123; <span class="attr">value</span>: <span class="keyword">this</span>.classReportData.goodCount, <span class="attr">name</span>: <span class="string">'goodCount'</span> &#125;,</span></span><br><span class="line"><span class="javascript">              &#123; <span class="attr">value</span>: <span class="keyword">this</span>.classReportData.passCount, <span class="attr">name</span>: <span class="string">'passCount'</span> &#125;,</span></span><br><span class="line"><span class="javascript">              &#123; <span class="attr">value</span>: <span class="keyword">this</span>.classReportData.unPassCount, <span class="attr">name</span>: <span class="string">'unPassCount'</span> &#125;</span></span><br><span class="line"><span class="undefined">            ],</span></span><br><span class="line"><span class="javascript">            animationEasing: <span class="string">'cubicInOut'</span>,</span></span><br><span class="line"><span class="undefined">            animationDuration: 2600</span></span><br><span class="line"><span class="undefined">          &#125;</span></span><br><span class="line"><span class="undefined">        ]</span></span><br><span class="line"><span class="undefined">      &#125;)</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined">&#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="进阶扩展"><a href="#进阶扩展" class="headerlink" title="进阶扩展"></a>进阶扩展</h2><h3 id="例：-安装日志组件"><a href="#例：-安装日志组件" class="headerlink" title="例： 安装日志组件"></a>例： 安装日志组件</h3><p><a href="https://www.npmjs.com/package/vuejs-logger" target="_blank" rel="noopener">https://www.npmjs.com/package/vuejs-logger</a></p>
<p>在终端输入安装</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vuejs-logger --save-exact</span><br></pre></td></tr></table></figure>
<p>把日志组件设置成全局组件</p>
<p>在<code>main.js</code>引入日志组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> VueLogger <span class="keyword">from</span> <span class="string">'vuejs-logger'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> options = &#123;</span><br><span class="line">    isEnabled: <span class="literal">true</span>,</span><br><span class="line">    logLevel : isProduction ? <span class="string">'error'</span> : <span class="string">'debug'</span>,</span><br><span class="line">    stringifyArguments : <span class="literal">false</span>,</span><br><span class="line">    showLogLevel : <span class="literal">true</span>,</span><br><span class="line">    showMethodName : <span class="literal">true</span>,</span><br><span class="line">    separator: <span class="string">'|'</span>,</span><br><span class="line">    showConsoleColors: <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//查配置插件注入到全局方法</span></span><br><span class="line">Vue.use(VueLogger, options)</span><br></pre></td></tr></table></figure>
<p>在其他组件就可以很简单的使用它来打印一些对象和变量了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$log.debug(<span class="string">'response'</span>, response.data)</span><br></pre></td></tr></table></figure>
<p><img src="https://user-images.githubusercontent.com/3469323/31655570-910fcbbe-b329-11e7-9738-bece4be4d1a8.png" alt></p>
<p><strong>关于一些第三方组件模块的引用，查看文档内的<a href="https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/import.html#%E5%BC%95%E5%85%A5%E4%BE%9D%E8%B5%96" target="_blank" rel="noopener">相关说明</a>。</strong></p>
<h3 id="关于icon图标自定义"><a href="#关于icon图标自定义" class="headerlink" title="关于icon图标自定义"></a>关于icon图标自定义</h3><p> 阿里”爸爸”的庞大的图标库：<a href="http://iconfont.cn/" target="_blank" rel="noopener">http://iconfont.cn/</a></p>
<p>在图标库里搜索你想要的图标，下载该图标SVG文件，然后扔进<code>@/icons</code></p>
<p>食用方法：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">svg-icon</span> <span class="attr">icon-class</span>=<span class="string">"password"</span> /&gt;</span></span><br></pre></td></tr></table></figure>
<p>比<a href="http://fontawesome.dashgame.com/" target="_blank" rel="noopener">Font Awesome</a>图标字体库使用舒服多了。</p>
<h2 id="构建打包"><a href="#构建打包" class="headerlink" title="构建打包"></a>构建打包</h2><p>这里打包只是在本地打包 ，没有使用CI进行打包构建。</p>
<h3 id="修改打包环境"><a href="#修改打包环境" class="headerlink" title="修改打包环境"></a>修改打包环境</h3><p>在<code>/config</code>目录下配置<code>dev.env.js</code> 开发环境地址 或新增其他环境文件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  NODE_ENV: <span class="string">'"development"'</span>,</span><br><span class="line">  ENV_CONFIG: <span class="string">'"dev"'</span>,</span><br><span class="line">  BASE_API: <span class="string">'"https://api-dev"'</span> <span class="comment">//替换你的API环境的地址</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="打包命令"><a href="#打包命令" class="headerlink" title="打包命令"></a>打包命令</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> 打包正式环境</span></span><br><span class="line">npm run build:prod</span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 打包测试环境</span></span><br><span class="line">npm run build:sit</span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 打包开发环境</span></span><br><span class="line">npm run build:dev</span><br></pre></td></tr></table></figure>
<p>然后在项目根目录下<code>/dist</code>目录生成打包后的静态文件。</p>
<p>然后扔到你的CDN或者nginx服务器里就万事大吉了。</p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
  </section>

  
  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      

      <section class="site-overview sidebar-panel sidebar-panel-active">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image" src="/images/avatar.gif" alt="Colorful_Ghost">
          <p class="site-author-name" itemprop="name">Colorful_Ghost</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
           
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/archives">
                <span class="site-state-item-count">16</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              
                <span class="site-state-item-count">6</span>
                <span class="site-state-item-name">分类</span>
              
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/tags/index.html">
                <span class="site-state-item-count">17</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="http://steamcommunity.com/id/233000/" target="_blank" title="Steam">
                  
                    <i class="fa fa-fw fa-steam"></i>
                  
                  Steam
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://wpa.qq.com/msgrd?v=3&uin=815666528&site=qq&menu=yes" target="_blank" title="QQ">
                  
                    <i class="fa fa-fw fa-qq"></i>
                  
                  QQ
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://t.me/Colorful_Ghost" target="_blank" title="Telegram">
                  
                    <i class="fa fa-fw fa-telegram"></i>
                  
                  Telegram
                </a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-block">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              Links
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="http://www.chaosgoo.com" title="Chaosgoo" target="_blank">Chaosgoo</a>
                </li>
              
            </ul>
          </div>
        

        


      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Colorful_Ghost</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Muse
  </a>
</div>

  <p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></p>


        

        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  






  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  

  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  


  




	





  





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  






  





  

  

  

  

</body>
</html>
